<template>
  <Modal
    :width="680"
    :title="title ? '编辑公告' : '新公告'"
    :visible="visible"
    :centered="true"
    @cancel="onCancel"
    @ok="handleSubmit"
    okText="提交"
  >
    <Form ref="formRef" :model="model" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
      <template v-if="announcement">
        <FormItem label="ID">
          <TypographyText>{{ model?.id }}</TypographyText>
          <Divider type="vertical" />
          <TypographyText :copyable="true">
            {{ model?._id }}
          </TypographyText>
        </FormItem>
        <FormItem label="发布于">
          {{ stringToYMD(model?.create_at) }}
        </FormItem>
        <FormItem label="最后修改于">
          {{ stringToYMD(model?.update_at) }}
        </FormItem>
      </template>
      <FormItem label="发布状态" name="state">
        <Select placeholder="选择状态" v-model:value="model.state" @change="handleChange">
          <SelectOption :value="0">
            <Space> <EditOutlined />草稿 </Space>
          </SelectOption>
          <SelectOption :value="1">
            <Space> <CheckOutlined />已发布 </Space>
          </SelectOption>
        </Select>
      </FormItem>
      <FormItem label="公告内容" name="content">
        <Input v-model:value="model.content" :auto-size="{ minRows: 2, maxRows: 5 }"></Input>
      </FormItem>
    </Form>
  </Modal>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import type { UnwrapRef, PropType } from 'vue'
import { EditOutlined, CheckOutlined } from '@ant-design/icons-vue'

import { stringToYMD, timestampToYMD } from '@/transformers/date'
import type { Announcement } from '@/constants/announcement'
import {
  Divider,
  Form,
  FormItem,
  Input,
  Modal,
  Select,
  SelectOption,
  Space,
  TypographyText,
} from 'ant-design-vue'

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  visible: {
    type: Boolean,
    default: false,
  },
  announcement: {
    type: Object as PropType<Announcement | null>,
  },
  onCancel: {
    type: Function as PropType<(e: MouseEvent) => void>,
    required: true,
  },
  onSubmit: {
    type: Function,
    required: true,
  },
})

const formRef = ref()
const model: UnwrapRef<Announcement> = reactive({
  id: undefined,
  _id: undefined,
  state: 1,
  content: '',
  update_at: '',
  create_at: '',
})
// const rules = {
//   state: [{ required: true, message: "请选择状态" }],
//   content: [{ required: true, message: "请输入内容" }],
// };
const handleChange = () => {}

watch(
  () => props.visible,
  (visible) => {
    if (visible) {
      if (props.announcement) {
        model.id = props.announcement.id
        model._id = props.announcement._id
        model.state = props.announcement.state
        model.content = props.announcement.content
        model.update_at = props.announcement.update_at
        model.create_at = props.announcement.create_at
      } else {
        model.state = 1
        model.content = ''
        model.update_at = timestampToYMD(new Date().getTime())
        model.create_at = timestampToYMD(new Date().getTime())
      }
    } else {
      formRef.value.resetFields()
    }
  }
)

const handleSubmit = () => {
  formRef.value
    .validate()
    .then((announcement: Announcement) => {
      props.onSubmit(announcement)
    })
    .catch(() => {
      console.log('error')
    })
}
</script>

<style lang="less" scoped>
.announcement {
  .toolbar {
    display: flex;
    justify-content: space-between;

    .select {
      width: 130px;
    }
    .search {
      width: 200px;
    }
  }
}
</style>
